// color-variables
@import "./variables.scss";
// reset
// @font-face {
//   font-family: 'DINAlternate-Bold';
//   src: url('/static/fonts/DIN_Alternate_Bold.ttf') format('truetype');
//   font-weight: normal;
//   font-style: normal;
// } 
*,
html {
  // font-family: PingFangSC-Regular, sans-serif, 'Avenir', Helvetica, Arial;
  font-family: Helvetica, Arial, sans-serif;
  padding: 0;
  margin: 0;
  color: #222;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; // -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input, textarea {
  user-select: text;  
}
body {
  width: 100vw;
  height: 100vh;//calc(100vh - 50px);//1294px;
  background-color: white;
}

button {
  padding: 0;
  border: none 0;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
}

/*清除谷歌浏览器记住密码后文本框黄色背景*/

input:-webkit-autofill {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #000;
}

img {
  display: block;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

// font-style-color
.text-default {
  color: $default-font !important;
}

.text-white {
  color: $white !important;
}

.text-primary {
  color: $primary !important;
}

.text-golden-bright {
  color: $golden-bright !important;
}

.text-golden-dark {
  color: $golden-dark !important;
}

.text-coral {
  color: $coral !important;
}
.text-warning{
  font-size: 28px;
  color: #ff0000;
}

.text-red {
  color: $red !important;
}

.text-blue {
  color: $blue !important;
}

.text-lightblue {
  color: $light-blue !important;
}

.text-green {
  color: $green !important;
}

.text-gray {
  color: $gray !important;
}

.text-mute {
  color: $mute !important;
}

.text-dark {
  color: $dark !important;
}

.text-black {
  color: $black !important;
}

.c6 {
  color: $c666 !important;
}

.c9 {
  color: $c999 !important;
}

.text-disabled{
  opacity: 0.5;
}

.op7{
  opacity: 0.7;
}

// font-style-size
.huge-text {
  font-size: 40px;
}

.large-text {
  font-size: 32px;
}

.normal-text {
  font-size: 28px;
}

.mini-text {
  font-size: 24px;
}

.tiny-text-l-c{
  font-size: 24px;
  transform-origin: left center;
  -webkit-transform: scale(0.83,0.83);
  // transform:  scale(1,1);
}
.py_13{
  background-position-y: -13px !important;
}
.tiny-text-r-c{
  font-size: 24px;
  transform-origin: right center;
  -webkit-transform: scale(0.83,0.83);
}
.tiny-text-c-c{
  font-size: 24px;
  transform-origin: center center;
  -webkit-transform: scale(0.83,0.83);
}

.bold-text {
  font-weight: bold;
}

.text-right {
  text-align: right;
}

//p-m
.pv6 {
  padding-top: 6px;
  padding-bottom: 6px;
}
.pv15{
  padding-top: 15px;
  padding-bottom: 15px;
}

.pv20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.pt20 {
  padding-top: 25px;
}

.ph30 {
  padding-left: 30px;
  padding-right: 30px;
}
.p30{
  padding: 30px;
}

.ph15 {
  padding-left: 15px;
  padding-right: 15px;
}

.mt20 {
  margin-top: 20px !important;
}
 
//button
.btn {
  border-radius: 10px;
  color: white;
  display: inline-block;
  text-align: center;
}
 
.btn-disabled {
  opacity: .2;
}

.msg_btn {
  white-space: nowrap;
  font-size: 28px;
  color: #642de2;
  width: 180px;
}

//el-icon
.icon,
.arrow {
  text-align: center;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.arrow:before {
  visibility: hidden;
  content: " ";
  display: inline-block;
  height: 20px;
  width: 20px;
  border-width: 4px 4px 0 0;
  border-color: #FFFFFF;
  border-style: solid;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -10px;
}

.arrow.right:before {
  visibility: visible;
  -webkit-transform: rotate(45deg);
}

.arrow.left:before {
  visibility: visible;
  -webkit-transform: rotate(-135deg);
}

.arrow.primary:before {
  border-color: $primary;
}

.arrow.black:before {
  border-color: $black;
}

.arrow.white:before {
  border-color: $white;
}

.arrow.gray:before {
  border-color: #D8D8D8;
}

.close_icon {
  background-image: url("/game/static/images/six_skills/close.png");
}
 
.num_icon_active{
  background: #FFB82A;
}

.num_icon_diabled{
  background: #E7E6E6;
}

//page-layout
.page,
.page_header,
.page_body,
.page_footer {
  position: relative;
  height: 100%;
  width: 100%;
}
.page{
  // background-color: $default-bg;
}

.nav_page {
  height: calc(100% - 100px); // margin-top: 100px;
}

.self_nav_page {
  position: relative;
  top: 100px;
  height: calc(100% - 100px);
}
.page_header {
  height: 120px;
}

.page_title {
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 20px 32px;
  font-size: 28px;
  color: $dark;
}

.page_body {
  height: calc(100% - 100px);
  overflow-y: scroll;
  position: relative;
}

.page_footer {
  height: 200px;
}

.page_divider {
  height: 2px;
  background: #6666667a;
  margin: 60px 30px;
}

.flex {
  display: flex;
  align-items: center;
}
.flex_col {
  flex-direction: column;
}

.f_r_s_c{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.f_r_s_e{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
}

.f_r_b_c{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.f_r_e_c{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.f_r_c_c{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.f_r_c_s{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
.f_r_a_c{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.f_c_b_c{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.f_c_a_c{
  display: flex;
  flex-direction: column;
  justify-content: space-around !important;
  align-items: center;
}
.f_c_s_c{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.f_c_c_s{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.f_c_c_b{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: space-between;
}
.f_c_c_c{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.f_c_c_e{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
.f_c_s_s{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.f_j_s {
  justify-content: flex-start !important;
}

.f_j_c {
  justify-content: center;
}

.f_j_e {
  justify-content: flex-end !important;
}

.f_j_b {
  justify-content: space-between;
}

.f_j_a {
  justify-content: space-around;
}

.f_a_s {
  align-items: flex-start !important;
}

.f_a_c {
  align-items: center;
}

.f_a_e {
  align-items: flex-end;
}

.fl1{
  flex: 1;
}

.fl2{
  flex: 2;
}
.text_dot{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blank {
  visibility: hidden;
}

.blank:before {
  visibility: hidden;
  display: none;
}

// form
.input {
  outline: none;
  border: none;
}

.select::before {
  content: " ";
  display: inline-block;
  height: 20px;
  width: 20px;
  border-width: 4px 4px 0 0;
  border-color: #c8c8cd;
  border-style: solid;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -11px;
  transform: rotate(45deg);
}

.no_select {
  -webkit-user-select: none;
  user-select: none;
}

.num{
  font-family: DIN Alternate, 'Avenir', Helvetica, Arial, sans-serif;
}

.btn_primary_big{
  background-image: linear-gradient(0deg, #FF9900 0%, #FFB82A 100%) !important;
  border-radius: 100px !important;
  color: #fff;
  font-size: 36px;
  padding: 29px 0;
  width: 100%;
  font-weight: 500;
  outline: none;
}

.sure-btn {
  width: 635px;
  background-image: linear-gradient(-1deg, #ff9900 0%, #ffb72a 97%);
  border-radius: 100px;
  padding: 30px 0;
}

.scale-fade-enter-active {
  transition: all 0.3s ease-in-out;
}
.scale-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.scale-fade-enter, .scale-fade-leave-to
/* .scale-fade-leave-active for below version 2.1.8 */ {
  transform: scale(0);
  opacity: 0;
}


#geetest-captcha {
  margin-bottom: 30px;
  .geetest_success_logo,
  .geetest_logo {
    display: none;
  }
  .geetest_wind {
    width: 100% !important;
  }
  .geetest_holder.geetest_wind{
    width: 100% !important;
    min-width: 100% !important;
  }
}
  .geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_copyright .geetest_logo{
    display: none !important;
  }
  .geetest_holder.geetest_mobile.geetest_ant .geetest_panel .geetest_copyright .geetest_copyright_tip{
    display: none !important;
  }